<template>
    <view class="container" @touchend="onChooseCardFinish">
        <view class="player1"></view>
        <view class="table">
            <!--  -->
            <!-- 展示底牌 -->
             <view @click="refresh" class="left-cards p-center">

             </view>
        </view>
        <view class="player2"></view>
        <view class="me-container">
            <view class="me" @touchstart="onChooseCardBegin" @touchmove="onChooseCard">
                <view class="card" @click="chooseCard(item)" :data-info="item" v-for="(item, index) in myCards" :class="{active:isActive(item)}" :style="{left:index*20 + 80+'rpx'}" :key="item.value + item.type + index">
                    <view class="info">
                        <p class="value" :class="{red:item.label === 'Joker'}">{{ item.label }}</p>
                        <img class="icon" :src="`/static/images/${item.type}.png`" alt="">
                    </view>
                    <image
                        :src="`/static/images/${item.type}.png`"
                        mode="scaleToFill"
                        class="center-icon"
                    />
                    <view class="info reverse">
                        <p class="reverse-value value" :class="{red:item.label === 'Joker'}">{{ item.label }}</p>
                        <image class="reverse-value icon" :src="`/static/images/${item.type}.png`" alt=""></image>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>
<script>
import { initCards } from '@/utils/initCards'
export default {
    data() {
        return {
            cards: [],
            myCards: [],
            chooseCardList:[]
        }
    },
    onLoad() {
        this.init()
    },
    methods: {
        init() {
            this.cards = initCards().sort((a, b) => {
                return Math.random() - 0.5
            })
            console.log(this.cards)
            this.myCards = this.cards.slice(0, 17).sort((a,b)=>b.value-a.value)
        },
        chooseCard(info){
            const index = this.chooseCardList.findIndex(item => {
                    return info.value === item.value && info.type === item.type
                })
            if(index > -1){
                // 删除
                this.chooseCardList.splice(index, 1)
            }else{
                // 新增
                this.chooseCardList.push(info)
            }
        },
        isActive(info) {
            return this.chooseCardList.some(item => {
                return info.value === item.value && info.type === item.type
            })
        },
        refresh(){
            this.myCards = this.cards.sort((a,b)=>Math.random() - 0.5).slice(0, 17).sort((a,b)=>b.value-a.value)
            console.log(this.myCards)
        },
        onChooseCardBegin(e) {
            console.log(e)
        },
        onChooseCard(e) {
            console.log('------------------',e)
        },
        onChooseCardFinish(e) {
            console.log(e)
        }
    }
}
</script>
<style lang="less" scoped>
@c-width:100rpx;
@c-height:180rpx;
.container {
    height: 100vh;
    overflow: hidden;
    background-color: red;
    position: relative;
    .table {
        display: flex;
        flex-wrap: wrap;
        position: relative;
        background-color: antiquewhite;
        perspective: 500rpx;
        height: 100vh;
    }
    .card {
            width: @c-width;
            height: @c-height;
            border-radius: 8rpx;
            position: relative;
            background-color: aliceblue;
            padding: 20rpx;
            margin: 10px;
            // position: absolute;
            // transform: rotateY(90deg);
            transform-style: preserve-3d;
            backface-visibility: hidden;
            
            .center-icon {
                position: absolute;
                top:50%;
                left: 50%;
                width:50rpx;
                height: 50rpx;
                transform: translate(-50%,-50%);
            }
            image {
                width: 20rpx;
                height: 20rpx;
            }
            .info{
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                .value{
                    font-weight:bold;
                    &.red{
                        color: #fb0404;
                    }
                }
                &.reverse{
                    position: absolute;
                    bottom: 20rpx;
                    right: 20rpx;
                    transform: rotate(180deg);
                }
            }
            
        }
}

.left-cards{
    width: 70rpx;
    height: @c-height;
    background-color: red;
    transform: translate(-50%,-50%) rotateX(80deg);
    box-shadow: 0 2rpx 0rpx rgba(0,0,0,0.5), 0 4rpx 0rpx rgba(0,0,0,0.5);
}
.p-center{
    position: absolute;
    left: 50%;
    top:50%;
}
.me-container{

    position: absolute;
    bottom: 0;
    width:auto;
    left: 0;
    right:0;
    height: 80rpx;
    background-color: aqua;
    display: flex;
    .me{
        padding: 0 30rpx;
        overflow: hidden;
        display: flex;
        justify-content: center;
        .card{
            width:50rpx;
            height: 80rpx;
            padding: 5rpx;
            flex-shrink: 0;
            margin-left: -20rpx;
            box-shadow: 0 0 2rpx rgba(0,0,0,0.5);
            position: absolute;
            &.active{
                top:-10rpx;
            }
            .center-icon{
                // display: none;
                width: 15rpx;
                height: 15rpx;
            }
            image{
                width: 10rpx;
                height: 10rpx;
            }
            .info{
                &.reverse{
                        position: absolute;
                        bottom: 5rpx;
                        right: 5rpx;
                        transform: rotate(180deg);
                    }
            }
        }
    }
}
</style>